<template>
  <li id="hotKeySetting" class="tab-pane tab-item">
    <div>
      <div class="list-header">菜单快捷键设置</div>
      <div class="title-sm">已设置快捷键的菜单：</div>
      <div class="table-box">
        <table class="table table-bordered table-bordered-center table-hover shortcuts-list">
          <thead><tr><th class="col-md-2">快捷键</th><th class="col-md-10">菜单名称</th></tr></thead>
          <tbody @click="showHot" id="hotSet-qy">
          <tr v-for="(v,k1) in showRootCom" :key="k1" :id="'qy-hot-'+k1">
            <td :id="'F'+k1"><p>{{'F'+(k1+1)}}</p></td>
            <td class="hot-key-value">
              <div class="tree-control">
                <span></span>
                <i class="fa fa-chevron-down"></i>
                <i class="fa fa-chevron-up"></i>
              </div>
              <!--<div class='hotKeyInfo'>-->
                <!--<span></span>-->
                <!--<label><img src='/static/resources/img/cross-sm.png'/></label>-->
              <!--</div>-->
              <!--快捷键树查询组件-->
              <div class="query-clean-box tree-query-box">
                <!--查询输入框-->
                <div class="query-box form-group clean-group">
                  <input v-model="queryVal" class="form-control" @click="showSearch(k)" @propertychange="showSearch(k)"/>
                  <a class="input-clean-btn" role="button" @click.stop="queryDataChange(k)"></a>
                  <a role="button" class="query-btn">
                    <i class="fa fa-search"></i>
                  </a>
                </div>
                <!--查询结果树-->
                <ul class="query-results-list">
                  <li class="leaf_li"></li>
                </ul>
                <!--所有菜单树-->
                <aside class="default-list setMenu-qy">
                  <ul @click="showIndex" class="tree-box metismenu hotSetRoot-qy">
                    <li 
                    	v-for="(rootItem,k2) of indexMenuData"
                    	v-if="indexMenuData !== '' && showRootCom[k1]"
                    	:showDir="showDir[k2]"
                    	:is="rootHtml"
                    	:uapMenuVos="indexMenu"
                    	:rootItem="rootItem"
                    	:key="k2">
                    </li>
                  </ul>
                </aside>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </li>
</template>

<script>
  import {getFarther} from '../../../utils/utils'
  import store from '../../../store/store'
  import {mapState} from 'vuex'
  import rootHtml from './hotKeySetting/rootHtml'
    export default {
      name: "hot-key-setting",
      store,
      data(){
          return {
            rootHtml:rootHtml,
            indexMenuData:'',
            queryVal:'',
            showRootCom:[],
            showDir:[],
          }
      },
      computed:{
        ...mapState('menusStore',['indexMenu'])
      },
      created(){
      	for(let i = 0;i < 12;++i){
      		this.showRootCom.push(false);
      	}
      },
      mounted(){
      	let doms = document.querySelectorAll('#hotSet-qy .tree-control');
      	for(let i = 0;i < doms.length;++i){
      		doms[i].k = i;
      	}
      },
      watch:{
        indexMenu(r){
          if(r !== ''){
            this.indexMenuData = [];
            for(let i = 0;i<r.length;++i){
              if(r[i].uumsFunction.parentFunction === '0'){
                this.indexMenuData.push(r[i]);
                this.showDir.push(false);
              }
            }
          }
        }
      },
      methods:{
        showIndex(e){
          let dom = getFarther('root-qy',e.target);
          if(dom.classList.contains('active')){
            dom.classList.remove('active')
          }else{
            let firstLi = document.querySelectorAll('.setMenu-qy>ul>.root-qy');
            for(let i = 0;i < firstLi.length;++i){
              firstLi[i].classList.remove('active');
            }
            this.showDir.splice(dom.k,1,true);
            this.$nextTick(()=>{
              	dom.classList.add('active');
              	let doms = dom.querySelectorAll('.menu-subList');
                for(let i = 0;i < doms.length;++i){
          				doms[i].k = i;
          			}
              });
          }
        },
        showHot(e){
          let dom = getFarther('tree-control',e.target);
          if(dom){
            if(dom.classList.contains('active')){
              dom.classList.remove('active')
            }else{
              let firstLi = document.querySelectorAll('#hotSet-qy .tree-control');
              for(let i = 0;i < firstLi.length;++i){
                firstLi[i].classList.remove('active');
              }
              this.showRootCom.splice(dom.k,1,true);
              this.$nextTick(()=>{
              	dom.classList.add('active');
              	let doms = dom.parentElement.querySelectorAll('.hotSetRoot-qy>.root-qy');
                for(let i = 0;i < doms.length;++i){
          				doms[i].k = i;
          			}
              });
            }
          }
        },
        showSearch(k){
          if (this.queryVal.length > 0) {
            document.querySelector('#qy-hot-'+k+' .query-clean-box .input-clean-btn').style.display = 'block';
            if (this.queryVal.length >= 2) {
              document.querySelector('#qy-hot-'+k+' .query-clean-box .query-results-list').style.display = 'block';
              document.querySelector('#qy-hot-'+k+' .query-clean-box .default-list').style.display = 'none';
            }
          } else if (this.queryVal.length === 0) {
            document.querySelector('#qy-hot-'+k+' .query-clean-box .input-clean-btn').style.display = 'none';
            document.querySelector('#qy-hot-'+k+' .query-clean-box .query-results-list').innerHTML = '';
            document.querySelector('#qy-hot-'+k+' .query-clean-box .default-list').style.display = 'block';
          }
        },
        queryDataChange(k){
          // document.querySelector('#qy-hot-'+k+' .query-clean-box .default-list .clean-group .form-control')
          this.queryVal = '';
          document.querySelector('#qy-hot-'+k+' .query-clean-box .default-list').style.display = 'block';
          document.querySelector('#qy-hot-'+k+' .input-clean-btn').style.display = 'none';
          document.querySelector('#qy-hot-'+k+' .query-clean-box .query-results-list').innerHTML = ''
          // let resultsList = $(this).parents('.query-clean-box').find('.query-results-list');
          // let defaultList = $(this).parents('.query-clean-box').find('.default-list');
          // $(this).parents('.query-clean-box').find('.clean-group .form-control').val('');
          // $(this).hide();
          // defaultList.slideDown("fast");
          // resultsList.html('');
        }
      }
    }
</script>

<style scoped>
#hotKeySetting .hot-key-value .tree-control~.tree-query-box{
  display: none;
}
#hotKeySetting .hot-key-value .tree-control.active~.tree-query-box{
  display: block;
}
</style>
